<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box">
        <div class="show">
            <img src="./imgs/1.jpg" alt="">
            <div class="mask"></div>
        </div>
        <div class="list">
            <p class="active">
                <img src="./imgs/1.small.jpg" showImg="./imgs/1.jpg" enlargeImg="./imgs/1.big.jpg" alt="">
            </p>
            <p>
                <img src="./imgs/2.small.jpg" showImg="./imgs/2.jpg" enlargeImg="./imgs/2.big.jpg" alt="">
            </p>
        </div>
        <div class="enlarge">

        </div>
    </div>
    <script>
        /* 
        分析需求：1、鼠标移入 遮罩层和 放大图都需要显示，鼠标移除的时候 遮罩层和放大图隐藏
                2、鼠标在移动的时候遮罩层要跟着鼠标动 （鼠标的中间动）（边界问题）
                3、放大图也要按照左边比例来移动
                4、鼠标移到小图上可以切换图片
         */

        //获得主盒子
        var boxbox = document.querySelector(".box")
        var box = document.querySelector(".show")
        var img = box.querySelector('img')
        //获取放大镜
        var mask = document.querySelector(".mask")
        //右边大图
        var right = document.querySelector('.enlarge')
        //左边图
        var list = document.querySelector(".list")

        //获得左边上下的img
        var oLeftImg = list.querySelector('img');//上
        // var oRightImg = document.querySelector('.enlarge').style.getComputedStyle
        // console.log(oRightImg);



        //鼠标移入
        box.onmouseover = function () {
            //移入放大镜显示出来
            mask.style.display = 'block';
            right.style.display = "block";
            var r = mask.offsetWidth / 2;
            console.log(r);

            var maxX = list.clientWidth - mask.offsetWidth;
            var maxY = list.clientWidth - mask.offsetHeight;
            console.log(list.clientHeight);//自生的宽加内边距

            //拿到右边的大图高宽
            let bgSize = getComputedStyle(right, null)['background-size'];
            var arr = bgSize.split(" ");
            var bigwidth = parseInt(arr[0]);
            var bigheight = parseInt(arr[1]);
            console.log("高:" + bigheight, "宽" + bigwidth);



            var scale = (bigwidth - right.clientWidth) / (list.clientWidth - mask.offsetWidth);
            // console.log(scale);
            // console.log(maxX, maxY);

            //让放大镜移动
            document.onmousemove = function (e) {
                var e = e || event;
                console.log(e.x);//是鼠标当前的位置
                var x = e.x - boxbox.offsetLeft - r;//鼠标减去左偏移量在减去遮蔽层宽/2
                var y = e.y - boxbox.offsetTop - r;
                console.log(x, y);

                // 边界
                if (x < 0) x = 0;
                if (y < 0) y = 0;
                if (x > maxX) x = maxX;
                if (y > maxY) y = maxY;
                mask.style.cssText += `left:${x}px;top:${y}px;`;

                // var scale = 大图的可移动范围 / 小遮罩层的移动范围

                right.style.backgroundPosition = `${-x * scale}px ${-y * scale}px`
            }
        }
        box.onmouseout = function () {
            //移出放大镜消失
            mask.style.display = 'none';
            right.style.display = "none";
        }


        // // 切换图片
        // list.onmouseover = function (e) {
        //   console.log(11);

        //   var e = e || event;
        //   var target = e.target || e.scrElement;
        //   if (target.tagName === 'IMG') {

        //     img.src = target.getAttribute('showImg');
        //     // right.backgroundUrl = target.getAttribute('enlargeImg');
        //   }

        // }

        // 获取小图片
        var picEles = document.querySelectorAll(".list p");
        picEles.forEach((item, key) => {
            item.onmouseover = function () {
                console.log(key);
                //  改变小图的样式 
                picEles.forEach((pie, k) => {
                    if (key == k) {
                        // 点击的key值 和当前的k相同了 加上active样式
                        item.classList.add("active");
                    } else {
                        pie.classList.remove("active");
                        // picEles[k]
                    }
                })
                //  改变中图的路径 
                img.src = `./imgs/${key + 1}.jpg`;
                // 改变大图的路径 
                right.style.background = `url(./imgs/${key + 1}.big.jpg) no-repeat`;
                right.style.backgroundSize = "800px 800px";
                right.style.backgroundPosition = "0px 0px";

            }
        })
    </script>
</body>

</html>